<!-- 参考官方文档 -->
<template>
    <!-- hover-class：点击样式 -->
    <view class="box-layout" hover-class="box-layout-hover">
        父组件
        <!-- hover-stop-propagation：阻止向祖先节点传播点击态 -->
        <view class="box-child" hover-class="box-child-hover" hover-stop-propagation>子组件</view>
    </view>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
    .box-layout {
        height: 100vh;
        background: $custom-color-white;
        text-align: center;

        .box-child {
            height: 50%;
            margin-top: 20%;
            background: $custom-color-red;
            text-align: center;
        }

        .box-child-hover {
            background: $custom-color-blue;
        }
    }

    .box-layout-hover {
        background: $custom-color-green;
    }
</style>